<!-- 首页页面 -->
<template>
  <div class="home-page">
    <!-- 头部组件 -->
    <home-header></home-header>
    <!-- 导航内容 -->
    <div class="nav" ref="navbar">
      <!-- 导航插件 -->
      <!-- selectId  选中的id -->
      <!-- 栏目内容,数组,items:[{label:'内容'},...] -->
      <!-- options: 选中时颜色 -->
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="changeTabs"
      >
      </ly-tab>
      <div class="category" @click="toCategory">
        <i class="iconfont icon-daohangfenlei"></i>
        <span>分类</span>
      </div>
    </div>
    <!-- 放置切换组件的内容 -->
    <component :is="homeComponent"></component>
    <!-- <home-index></home-index> -->
    <!-- <home-category></home-category> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeHeader from "./HomeHeader/HomeHeader.vue";
import HomeIndex from "./HomeIndex/HomeIndex.vue";
import HomeCategory from "./HomeCategory/HomeCategory.vue";
import HomeClothes from "./HomeClothes/HomeClothes.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HomeHeader, HomeIndex, HomeCategory,HomeClothes },
  data() {
    //这里存放数据
    return {
      selectedId: 0,
      items: [
        { label: "首页" },
        { label: "家用电器" },
        { label: "男装女装" },
        { label: "鞋靴箱包" },
        { label: "手机数码" },
        { label: "电脑办公" },
        { label: "家居家访" },
        { label: "个人化妆" },
        { label: "休闲运动" },
      ],
      options: {
        activeColor: "#fff",
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
      homeComponent: "HomeIndex",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      // 回调函数,第一个参数为当前bar的内容,第二个参数为当前bar的索引
    changeTabs(item, index) {
      if (index == 0) {
        this.homeComponent = "HomeIndex";
      } if(index == 1) {
        this.homeComponent = "HomeCategory";
      } if(index == 2) {
        this.homeComponent = "HomeClothes"
      }
    },
    toCategory() {
      this.$router.push("/categorypage");
    },
    // 监听滚动
    scrollHome() {
      if (document.documentElement.scrollTop >= 95) {
        this.$refs.navbar.className = "nav nav-fixed";
      } else {
        this.$refs.navbar.className = "nav";
      }
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    document.addEventListener("scroll", this.scrollHome);
  },
  // 销毁前--解除全局注册的事件
  beforeDestroy() {
    document.removeEventListener("scroll", this.scrollHome);
  },
};
</script>
<style lang="less">
.home-page {
  // background-color: red;
  .nav {
    width: 100%;
    height: 4.4rem;
    // background-color: rgb(228, 49, 36);
    // background-color: transparent;
    position: relative;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
    // 消除导航插件的默认样式
    .ly-tab {
      width: 83%;
      .ly-tabbar {
        border-bottom: 0px solid #eee;
        box-shadow: 0 0px 0px 0px #eee;
        background-color: transparent;
        .ly-tab-item {
          color: #fff;
          padding: 0 0.1rem;
        }
      }
    }
    .category {
      box-shadow: -5px 0px 4px -4px rgba(0, 0, 0, 0.5);
      color: #fff;
      width: 15%;
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 1.4rem;
      i {
        margin: 0 0.5rem 0 0.3rem;
      }
    }
  }
  // 导航滚动时的定位方式
  .nav-fixed {
    position: fixed;
    background-color: rgb(226, 44, 44);
    top: 5rem;
  }
}
</style>
